<template>
<div>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item,index in newsList" :key="item.content">
            <router-link :to="'/home/newsinfo/'+index">
                <img class="mui-media-object mui-pull-left" :src="item.user.profile_image">
                <div class="mui-media-body">
                    <h5>{{item.id}}</h5>
                    <p class='mui-ellipsis'>
                        <span>{{item.content}}</span>
                        <span>{{item.user.username}}</span>
                    </p>
                </div>
            </router-link>
        </li>
    </ul>
</div>
</template>

<script>
    import {Toast} from 'mint-ui'
    // 导入回到顶部
    export default{
        // 导入通讯工具
        data(){
            return {
                newsList:[]
            }
        },
        created(){
            this.showPic()
        },
        methods:{
            // 使用vue-rouerse获取接口
            showPic(){
                this.$http.get("satinCommentApi?id=27610708&page=2").then(ret=>{
                    var data=ret.body.data.normal.list;
                    this.newsList=data
                },error=>{
                    Toast('获取列表失败')
                });
            },
        },

    }
</script>

<style scoped lang="scss">
.mui-ellipsis{
    display: flex;
    justify-content: space-between;
    span{
    &:nth-child(1){
        display: inline-block;
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
    }
    &:nth-child(2){
        color: #d32f17;
    }
}

}
h5{
    font-size: 16px;
    color: #000;
}



</style>